
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>动态搜索框html代码，搜索框动画代码模板</title>
    <!-- 引入字体 -->
    <link rel='stylesheet' 
    href='https://fonts.googleapis.com/css?family=Nunito'>
    <!-- CSS样式 -->
    <style>
        *{
            outline: none;
        }

        body
        {
            margin: 0;
            background-color: #ffd8d8;
        }

        .tb
        {
            display: table;
            width: 100%;
        }

        .td
        {
            display: table-cell;
            vertical-align: middle;
        }

        input, button
        {
            color: #fff;
            font-family: Nunito;
            padding: 0;
            margin: 0;
            border: 0;
            background-color: transparent;
        }

        /* 整个搜索框的背景样式 */
        #cover
        {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            width: 100%;
            padding: 35px;
            margin: -83px auto 0 auto;
            background-color: #ff7575;
            /* 背景圆角 */
            border-radius: 20px;
            /* 背景阴影 */
            box-shadow: 0 10px 40px #ff7c7c, 
                        0 0 0 20px #ffffffeb;
            /* 缩放0.5倍 */
            transform: scale(0.5);
        }

        form
        {
            height: 96px;
        }

        input[type="text"]
        {
            width: 100%;
            height: 96px;
            font-size: 60px;
            line-height: 1;
        }
        /* 默认字体色 */
        input[type="text"]::placeholder
        {
            color: #e16868;
        }

        #s-cover
        {
            width: 1px;
            padding-left: 35px;
        }

        button
        {
            position: relative;
            display: block;
            width: 84px;
            height: 96px;
            cursor: pointer;
        }

        /* 搜索按钮圆圈样式 */
        #s-circle
        {
            position: relative;
            top: -8px;
            left: 0;
            width: 43px;
            height: 43px;
            margin-top: 0;
            border-width: 15px;
            border: 15px solid #fff;
            background-color: transparent;
            border-radius: 50%;
            transition: 0.5s ease all;
        }

        /* 搜索按钮倾斜的直线 */
        button span
        {
            position: absolute;
            top: 68px;
            left: 43px;
            display: block;
            width: 45px;
            height: 15px;
            background-color: transparent;
            border-radius: 10px;
            transform: rotateZ(52deg);
            transition: 0.5s ease all;
        }

        button span:before, button span:after
        {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 45px;
            height: 15px;
            background-color: #fff;
            border-radius: 10px;
            transform: rotateZ(0);
            transition: 0.5s ease all;
        }

        /* 鼠标移入搜索按钮把原来的搜索按钮的圆变成横线 */
        #s-cover:hover #s-circle
        {
            top: -1px;
            width: 67px;
            height: 15px;
            border-width: 0;
            background-color: #fff;
            border-radius: 20px;
        }

        /* 鼠标移入搜索按钮旋转原本的箭头 */
        #s-cover:hover span
        {
            top: 50%;
            left: 56px;
            width: 25px;
            margin-top: -9px;
            transform: rotateZ(0);
        }

        #s-cover:hover button span:before
        {
            bottom: 11px;
            transform: rotateZ(52deg);
        }

        #s-cover:hover button span:after
        {
            bottom: -11px;
            transform: rotateZ(-52deg);
        }
        #s-cover:hover button span:before, 
        #s-cover:hover button span:after
        {
            right: -6px;
            width: 40px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<!-- html搜索框代码布局 -->
<div id="cover">
  <form method="get" action="">
    <div class="tb">
      <div class="td">
        <input type="text" placeholder="Search" required>
      </div>
      <div class="td" id="s-cover">
        <button type="submit">
          <div id="s-circle"></div>
          <span></span>
        </button>
      </div>
    </div>
  </form>
</div>
</body>
</html>
